import React from 'react';

import Play from '@/assets/svg/play.svg';
import Pause from '@/assets/svg/pause.svg';
import Next from '@/assets/svg/next.svg';
import Prev from '@/assets/svg/prev.svg';

interface AudioControlsTypes {
  isPlaying: boolean;
  onPlayPauseClick: Function;
  onPrevClick: Function;
  onNextClick: Function;
}

const AudioControls = ({
  isPlaying,
  onPlayPauseClick,
  onPrevClick,
  onNextClick,
}: AudioControlsTypes) => {
  return (
    <div className="audio-controls">
      <button type="button" className="prev" onClick={() => onPrevClick()} aria-label="Previous">
        <img src={Prev} alt="" />
      </button>
      {isPlaying ? (
        <button
          type="button"
          className="pause"
          onClick={() => onPlayPauseClick(false)}
          aria-label="Pause"
        >
          <img src={Pause} alt="Pause" />
        </button>
      ) : (
        <button
          type="button"
          className="play"
          onClick={() => onPlayPauseClick(true)}
          aria-label="Play"
        >
          <img src={Play} alt="Play" />
        </button>
      )}
      <button type="button" className="next" onClick={() => onNextClick()} aria-label="Next">
        <img src={Next} alt="Next" />
      </button>
    </div>
  );
};

export default AudioControls;
